<template>
	<view class="tie-in">
		<view class="tie-in-nav">
			<u-navbar 
				:title="isScroll?'搭配助手':''" 
				back-icon-size="40"
				back-icon-name="arrow-leftward"
				back-icon-color="#000"
				:borderBottom="false" 
				:background="{backgroundColor: isScroll?'#FFF':'rgba(255,255,255,0)'}">
			</u-navbar>
		</view>
		<view class="tie-in-banner" :style="{marginTop: '-'+NavHeight+'px'}">
			<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/banner%402x.png"></image>
			<!-- <view class="type">
				<view class="type-item" :class="{active: typeValue==data.value}" v-for="(data,index) in typeList" :key="index" @click="changeType(data.value,index)">{{data.label}}</view>
			</view> -->
		</view>
		<view class="tie-in-list">
			<view class="chosed-list">
				<view class="chosed-item" v-for="(data,index) in tieIn.list" :key="index">
					<view class="chosed-item-tit">
						<view class="space-name"><image :src="data.icon" mode="widthFix"></image>{{data.space_name}}</view>
						<view class="space-icon" @click="addPro(data.space_id)">
							<image :src="data.plus"></image>
						</view>
					</view>
					<view class="chosed-item-goods">
						<view class="chosed-item-goods-item" v-for="(item,i) in data.goods_list" :key="i">
							<view class="checkbox">
								<u-checkbox v-model="item.checked" active-color="#141414" label-size="24" @change="singleChange"></u-checkbox>
							</view>
							<view class="goods-item-image" @click="goProInfo(item.goods_id)">
								<image :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="goods-item-info">
								<view class="goods-item-name" @click="goProInfo(item.goods_id)">{{item.goods_name}}</view>
								<view class="goods-item-skuInfo" @click="goProInfo(item.goods_id)">
									<text>{{item.goods_sku}}</text>
								</view>
								<view class="goods-item-price">
									<text class="price">￥<text>{{item.retail_price}}</text></text>
									<view class="number">
										<!-- x{{item.num}} -->
										<u-number-box
											:min="1"
											v-model="item.num"
											:input-width="60" 
											:input-height="52" 
											bg-color="#FFFFFF"
											@minus="singleChange($event,item.match_goods_id)"
											@plus="singleChange($event,item.match_goods_id)"
											disabled-input>
										</u-number-box>
									</view>
									<view class="del" @click="delSingle(index,i,item.match_goods_id)">
										<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/icon2.png"></image>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="tie-in-bot">
			<u-checkbox v-model="checkedAll" active-color="#141414" label-size="24" @change="choseAll">全选</u-checkbox>
			<view class="del" @click="del">删除</view>
			<view class="total">
				<view>已选{{choseNum}}件商品</view>
				<view>合计<text>￥{{chosePrice}}</text></view>
			</view>
			<view class="created" @click="created">{{tieIn.match_id?'修改方案':'生成方案'}}</view>
		</view>
		
		<!-- 选择风格 -->
		<uni-popup type="bottom" ref="selectStyle" :maskClick="false">
			<view class="selectStylePop">
				<view class="selectStylePop-tit">
					<text>挑选您喜欢的风格</text>
					<view class="close" @click="closePickStyle"><u-icon name="close"></u-icon></view>
				</view>
				<view class="selectStylePop-subtit">至少选择一个</view>
				<view class="selectStylePop-list">
					<view class="selectStylePop-item" v-for="(data,index) in style_images_list" :key="index" @click="choseStyle(data.style_id)">
						<image :src="data.style_image"></image>
						<view class="checked" v-if="tieIn.style_id.indexOf(data.style_id)!=-1">
							<u-icon name="checkbox-mark" color="#141414" size="35"></u-icon>
						</view>
					</view>
				</view>
				<view class="enter" @click="pickOk">选好了,立即搭配</view>
			</view>
		</uni-popup>
		<!-- 选择风格 -->
		
		<!-- 商品选择 -->
		<uni-popup type="bottom" ref="goodsListPop" @change="closeSelect">
			<view class="goodsListPop">
				<view class="goodsListPop-search">
					<view class="search-left">
						<u-search shape="square" placeholder="输入商品名称或编号" 
							v-model="form.keyword" 
							@search="search" 
							@custom="search" 
							@clear="search">
						</u-search>
					</view>
					<view class="close" @click="closeGoodsListPop"><u-icon name="close-circle" size="50" color="#999"></u-icon></view>
				</view>
				<view class="goodsListPop-class">
					<u-tabs
						ref="goodsListPopTab"
						:list="classList"
						:current="classIndex"
						@change="classTabChange"
						active-color="#141414"
						inactive-color="#666666"
						name="class_name"
						font-size="28">
					</u-tabs>
				</view>
				<view class="goodsListPop-small-function">
					<pt-small-function 
						:Multiple="true"
						:showSpace="false"
						:sortPopList="sort_list"
						:stylePopList="style_list"
						:styleID="form.style_id"
						@clickItem="clickItem"
						:showLeft="false">
					</pt-small-function>
				</view>
				<scroll-view scroll-y class="goodsListPop-goods" @scrolltolower="loadMoreGoods">
					<view class="goods-list" v-if="showGoods && goods_list.length">
						<view class="goods-item" v-for="(data,index) in goods_list" :key="index" @click="goProInfo(data.goods_id)">
							<view class="goods-item-image">
								<image :src="data.image" mode="aspectFill"></image>
							</view>
							<view class="goods-item-info">
								<view class="goods-item-name">{{data.goods_name}}</view>
								<view class="goods-item-price">
									<text>￥<text>{{data.retail_price}}</text></text>
									<view class="join" @click.stop="join(data)">加入方案</view>
								</view>
							</view>
						</view>
					</view>
					<pt-loading-more v-if="isLoading" style="background-color: #FFF;"></pt-loading-more>
					<pt-nomore v-if="noMore && goods_list.length" style="background-color: #FFF; margin-top: 30rpx;"></pt-nomore>
					<pt-nothing 
						bgColor="#FFF"
						v-if="showGoods && !goods_list.length"
						text="暂无商品" 
						:isHigh="false"
						icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
					</pt-nothing>
				</scroll-view>
			</view>
		</uni-popup>
		<!-- 商品选择 -->
		
		<!-- 加入方案选择sku -->
		<uni-popup type="bottom" ref="sku" @change="showSkuFun">
			<pt-sku
				v-if="showSku"
				:skuInfo="goods_info"
				@closeSku="closeSku"
				:actionType="actionType"
				@confirmAction="confirmAction(arguments)"
				:skuList="skuList"
				:selectedArr="selectedArr"
				:subIndex="subIndex"
				:isMerchant="false"
				:isMatch="true"
				:shopItemInfo="shopItemInfo">
			</pt-sku>
		</uni-popup>
		<!-- 加入方案选择sku -->
		
		<!-- 创建方案名称&简介弹窗 -->
		<uni-popup type="bottom" ref="created" :maskClick="false">
			<view class="created-tie-in">
				<view class="created-tie-in-tit">
					<text>方案命名</text>
					<view class="close" @click="closeCreated"><u-icon name="close"></u-icon></view>
				</view>
				<view class="created-tie-in-form">
					<view class="label">方案名称</view>
					<view class="input"><input v-model="tieInForm.name" placeholder="格式:空间+风格,如:两房一厅的轻奢风" maxlength="20"></view>
					<view class="label">搭配理念</view>
					<view class="input"><input v-model="tieInForm.remark" placeholder="请输入搭配理念(选填)"></view>
					<view class="label">选择封面图</view>
					<view class="chose-poster">
						<scroll-view scroll-x class="chose-poster-scroll">
							<view
								class="poster-image" 
								:class="{active: match_poster==data}" 
								v-for="(data,index) in allGoodsImgs" 
								:key="index" 
								@click="chosePoster(data)">
									<u-image
										width="165rpx"
										height="165rpx"
										:fade="true"
										:src="data" 
										mode="aspectFit" >
									</u-image>
							</view>
						</scroll-view>
					</view>
					<pt-scroll-more :text="'左滑查看更多'" :icon="'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/index/arrow-pointer.png'" :width="32" :height="26" v-if="allGoodsImgs.length > 3"></pt-scroll-more>
					<view class="btn" @click="$u.throttle(submit, 2000)">{{tieIn.match_id?'确定修改':'立即创建'}}</view>
				</view>
			</view>
		</uni-popup>
		<!-- 创建方案名称&简介弹窗 -->
		
		<uni-popup type="center" ref="templeteMessage" :maskClick="false">
			<view class="templeteMessage-box">
				<view class="templeteMessage-box-close"><u-icon name="close" size="40" @click="closeTempleteMessage"></u-icon></view>
				<image :lazy-load="true" src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/proInfo/tips.png?v=2"></image>
				<view class="templeteMessage-tit">打开活动状态提醒</view>
				<view class="templeteMessage-subtit">开启提醒，第一时间了解详情</view>
				<view class="templeteMessage-btn" @click="TemplateMessage">马上开启</view>
			</view>
		</uni-popup>
		
		
		<!--专业版如果从商品详情进入的需要先选择空间-->
		<uni-popup type="bottom" ref="choseSpace" :maskClick="false">
			<view class="choseSpace">
				<view 
					class="choseSpace-item" 
					v-for="(data,index) in tieIn.list" 
					:key="index" 
					:class="{active: form.space_id==data.space_id}" 
					@click="choseSpace(data.space_id)">
					<image :src="data.icon" mode="widthFix"></image> {{data.space_name}}
				</view>
				<view class="confirm">
					<view class="cancel-btn" @click="cancelJoin">取消</view>
					<view class="confirm-btn" @click="getProInfo('close')">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<pt-openSetting ref="openSetting" tips="您已关闭订阅消息主开关，请打开主开关后重新开启消息回复推送"></pt-openSetting>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showSku: false,
				isScroll: false,
				NavHeight: 0,
				tieIn: {
					match_id: '',
					style_id: [],
					list: [{
						space_id: 1,
						space_name: '客厅',
						icon: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-22/20200822/5e8f64a4736624d5281d84ae9c877ba7.png',
						plus: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/plus.png',
						goods_list: []
					},{
						space_id: 2,
						space_name: '餐厅',
						icon: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-22/20200822/9ca2c55739321f3ac3f995f32fc70419.png',
						plus: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/plus.png',
						goods_list: []
					},{
						space_id: 3,
						space_name: '卧室',
						icon: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-22/20200822/85212718485a22a5bcc71510a564def9.png',
						plus: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/plus.png',
						goods_list: []
					},{
						space_id: 4,
						space_name: '书房',
						icon: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-12/20200812/00c455a8588c10d4915e2831b51b1ab9.png',
						plus: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/plus.png',
						goods_list: []
					},{
						space_id: 34,
						space_name: '次卧',
						icon: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-15/20220315/4c571d25dac4131f608dda209572725d.png',
						plus: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/plus.png',
						goods_list: []
					},{
						space_id: 35,
						space_name: '儿童房',
						icon: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-08-18/20200818/851c23ff0ed4a887abe1f2ce774e6f4a.png',
						plus: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/plus.png',
						goods_list: []
					},{
						space_id: 36,
						space_name: '其他',
						icon: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2022-03-15/20220315/4b6b04cba7b7ed2834c0f4da8e005149.png',
						plus: 'https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/tie-in/plus.png',
						goods_list: []
					}],
				},
				form: {
					keyword: '',
					space_id: '',
					style_id: '',
					class_id: '',
					order_by: 'goods_id',
					page: 0,
					asc: 2
				},
				sort_list: [{
					sort_id: 1,
					sort_name: '综合',
					selected: false
				},{
					sort_id: 2,
					sort_name: '上新',
					selected: false
				},{
					sort_id: 3,
					sort_name: '人气',
					selected: false
				},{
					sort_id: 4,
					sort_name: '价格',
					selected: false
				}],
				style_images_list: [],
				style_list: [],
				allClassList: [],
				classList: [],
				classIndex: 0,
				goods_list: [],
				showGoods: false,
				isLoading: false,
				noMore: false,
				skuAllList: [],
				skuList: [],
				selectedArr: [],
				subIndex: [],
				shopItemInfo: '',
				goods_info: {
					goods_id: '',
					goods_name: '',
					goods_sku: '',
					number: 1,
					img: '',
					price: '',
					sku_id: '',
					style_id: '',
					type_id: '',
					factory_id: ''
				},
				actionType: 'join',
				proData: '',
				checkedAll: false,
				goodsNum: 0,
				chosePrice: 0,
				choseNum: 0,
				tieInForm: {
					match_type: 1,
					name: '',
					remark: '',
					img: '',
					price: '',
					goods: ''
				},
				allGoodsImgs: [],
				match_poster: '',
				// 足迹参数
				addFootParam: {
					start_time: '',
					end_time: '',
					stay_time: 0
				},
				typeValue: 1,
				typeList: [{
					label: '专业版',
					value: 1
				},{
					label: '简易版',
					value: 2
				}],
				professionalSpaceId: '',
			};
		},
		watch: {
			tieIn: {
				handler: function (){
					uni.setStorageSync('tieIn',JSON.stringify(this.tieIn))
				},
				deep: true
			}
		},
		onPageScroll(e) {
			if (e.scrollTop > 100) {
				this.isScroll = true
				// #ifdef MP || APP-VUE
				uni.setNavigationBarColor({
					frontColor: '#000000',
					backgroundColor: ''
				})
				// #endif
			} else {
				this.isScroll = false
				// #ifdef MP || APP-VUE
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: ''
				})
				// #endif
			}
		},
		onLoad() {
			uni.setStorageSync('typeValue',this.typeValue)
			if(uni.getStorageSync('userInfo')){
				this.addFoot('方案-搭配助手-设计器')
			}
			this.getClassList()
			if(uni.getStorageSync('tieIn')){
				if(!JSON.parse(uni.getStorageSync('tieIn')).match_id){
					this.tieIn = JSON.parse(uni.getStorageSync('tieIn'))
				}else{
					this.tieIn.match_id = JSON.parse(uni.getStorageSync('tieIn')).match_id
				}
				this.form.style_id = this.tieIn.style_id.join(',')
				this.singleChange()
			}else{
				this.$nextTick(function(){
					this.$refs.selectStyle.open()
				})
			}
			this.$nextTick(() => {
				uni.createSelectorQuery().in(this).select('.tie-in-nav').boundingClientRect(res => {
					if (res) {
						this.NavHeight = res.height
					}
				}).exec()
			})
		},
		onShow() {
			uni.setStorageSync('typeValue',this.typeValue)
			let pages = getCurrentPages();
			let currentPage = pages[pages.length-1];
			let options = currentPage.options.goods_info?JSON.parse(currentPage.options.goods_info):''
			if(options){
				this.goods_info = options
				this.$nextTick(() => {
					this.$refs.choseSpace.open()
				})
			}else if(this.goods_info.goods_id){
				this.getProInfo()
			}
			if(uni.getStorageSync('tieIn')){
				if(JSON.parse(uni.getStorageSync('tieIn')).match_id){
					this.tieIn.match_id = JSON.parse(uni.getStorageSync('tieIn')).match_id
					this.getMatchInfo()
				}
			}
			setTimeout(() => {
				uni.setNavigationBarColor({
					frontColor: '#ffffff',
					backgroundColor: '',
					animation: {
						duration: 400,
						timingFunc: 'easeIn'
					}
				})
			},200)
		},
		methods: {
			addFoot(where){
				this.$u.api.AddFoot({
					// #ifdef MP-WEIXIN
					type: 1,
					// #endif
					// #ifdef APP-PLUS
					type: 2,
					// #endif
					// #ifdef H5
					type: 3,
					// #endif
					store_id: uni.getStorageSync('userInfo')?JSON.parse(uni.getStorageSync('userInfo')).store_id:'',
					client: 1,
					where: where,
					stay_time: 0,
					goods_id: 0,
					store_goods_id: 0,
					is_new: 1
				})
			},
			// 编辑时获取方案详情
			getMatchInfo(){
				this.$u.api.matchList({match_id: this.tieIn.match_id, paramter: 1}).then(res => {
					if(res.datas.length){
						this.match_poster = res.datas[0].img
						this.tieIn.match_id = this.tieIn.match_id
						this.form.style_id = res.datas[0].style_id_list.join(',')
						this.tieInForm.name = res.datas[0].name
						this.tieInForm.remark = res.datas[0].remark
						res.datas[0].goods.forEach(item => {
							this.tieIn.list.forEach(data => {
								if(item.space_id==data.space_id){
									if(item.goods.length){
										data.goods_list = []
										item.goods.forEach(goodsItem => {
											data.goods_list.push({
												checked: true,
												image: goodsItem.sku.img,
												goods_id: goodsItem.goods_id,
												goods_name: goodsItem.goods_name,
												goods_sku: goodsItem.sku.color+','+goodsItem.sku.lining+','+goodsItem.sku.size,
												num: goodsItem.num,
												retail_price: goodsItem.sku.retail_price,
												sku_id: goodsItem.sku_id,
												style_id: goodsItem.style_id,
												match_goods_id: goodsItem.match_goods_id,
												type_id: goodsItem.type_id
											})
										})
									}
								}
							})
						})
						this.singleChange()
					}else{
						this.tieIn.match_id = ''
						this.checkedAll = false
					}
				})
			},
			// 进入选择风格
			choseStyle(style_id){
				if(this.tieIn.style_id.indexOf(style_id)==-1){
					this.tieIn.style_id.push(style_id)
				}else{
					this.tieIn.style_id.forEach((item,index) => {
						if(item==style_id){
							this.tieIn.style_id.splice(index,1)
						}
					})
				}
			},
			pickOk(){
				if(!this.tieIn.style_id.length){
					uni.showToast({
						icon: 'none',
						title: '至少选择一个风格'
					})
					return false
				}
				this.form.style_id = this.tieIn.style_id.join(',')
				this.$refs.selectStyle.close()
			},
			// 获取分类列表
			getClassList(){
				this.$u.api.CategoryItems({store_id: 1}).then(res => {
					this.allClassList = res.datas.list
					this.allClassList.forEach(item => {
						if(item.space_id == -1){
							this.style_list = JSON.parse(JSON.stringify(item.list))
							this.style_images_list = JSON.parse(JSON.stringify(item.list))
						}
					})
					this.style_list.unshift({
						style_id: '',
						style_name: '全部'
					})
				})
			},
			// 获取商品详情
			getProInfo(close){
				let space_id
				if(uni.getStorageSync('typeValue')==1){
					space_id = this.professionalSpaceId
				}else{
					space_id = this.form.space_id
				}
				this.tieIn.list.forEach(item => {
					if(space_id==item.space_id){
						item.goods_list.push({
							checked: true,
							image: this.goods_info.img,
							goods_id: this.goods_info.goods_id,
							goods_name: this.goods_info.goods_name,
							goods_sku: this.goods_info.goods_sku,
							num: this.goods_info.number,
							retail_price: this.goods_info.price,
							sku_id: this.goods_info.sku_id,
							style_id: this.goods_info.style_id,
							type_id: this.goods_info.type_id
						})
					}
				})
				if(this.tieIn.match_id){
					let singleGoods = [{
						goods_id: this.goods_info.goods_id,
						sku_id: this.goods_info.sku_id,
						num: this.goods_info.number,
						style_id: this.goods_info.style_id,
						space_id: this.form.space_id,
						match_id: this.tieIn.match_id,
						type_id: this.goods_info.type_id
					}]
					let data = {
						match_id: this.tieIn.match_id,
						goods: JSON.stringify(singleGoods)
					}
					this.$u.api.MatchAddGoods(data)
				}
				this.choseNum = 0
				this.singleChange()
				setTimeout(() => {
					this.goods_info = this.$options.data().goods_info
					this.$refs.goodsListPop.close()
					uni.showToast({
						icon: 'none',
						title: '加入成功',
						success: () => {
							if(close){
								this.$refs.choseSpace.close()
							}
						}
					})
				},200)
			},
			// 添加商品
			addPro(space_id){
				if(uni.getStorageSync('typeValue')==1){
					this.professionalSpaceId = space_id
					this.form.space_id = ''
				}else{
					this.form.space_id = space_id
				}
				this.classList = []
				this.classIndex = 0
				this.form.class_id = ''
				if(uni.getStorageSync('typeValue')==1){
					this.classList = JSON.parse(JSON.stringify(this.allClassList[0].list)) //转换两次避免改变原数据
				}else{
					this.allClassList.forEach(item => {
						if(this.form.space_id==item.space_id){
							this.classList = JSON.parse(JSON.stringify(item.list)) //转换两次避免改变原数据
						}
					})
				}
				this.classList.unshift({
					class_id: '',
					class_name: '全部'
				})
				this.form.page = 0
				this.goods_list = []
				this.noMore = false
				this.showGoods = false
				this.getGoodsSearchList('1')
			},
			// 切换品类
			classTabChange(e){
				this.classIndex = e
				if(e!=0){
					this.form.class_id = this.classList[e].class_id
				}else{
					this.form.class_id = ''
				}
				this.form.page = 0
				this.goods_list = []
				this.noMore = false
				this.showGoods = false
				this.getGoodsSearchList()
			},
			//获取商品列表
			getGoodsSearchList(e){
				let data = {
					paramter: 1,
					keyword: this.form.keyword,
					space_id: this.form.space_id,
					class_id: this.form.class_id,
					style_id: this.form.style_id,
					order_by: this.form.order_by,
					page: this.form.page,
					asc: this.form.asc,
					factory_id: this.goods_info.factory_id
				}
				uni.showLoading({
					title: '加载中'
				})
				this.$u.api.GoodsSearchList(data).then(res => {
					uni.hideLoading()
					this.showGoods = true
					this.isLoading = false
					this.$refs.goodsListPop.open()
					if(e){
						setTimeout(() => {
							this.$refs.goodsListPopTab.init()
						},300)
					}
					if(res.datas.data.length){
						if(res.datas.data.length < 10){
							this.noMore = true
						}
						res.datas.data.forEach(item => {
							this.goods_list.push(item)
						})
					}else{
						this.noMore = true
					}
				})
			},
			// 筛选商品列表
			clickItem(e){
				if(e.sort!=='sort'){
					this.form.order_by = e.sort
				}else{
					this.form.order_by = 'goods_id'
				}
				if(e.asc){
					this.form.asc = e.asc
				}else{
					this.form.asc = 2
				}
				this.form.style_id = e.style_id!=0?e.style_id:''
				this.form.page = 0
				this.goods_list = []
				this.noMore = false
				this.showGoods = false
				this.getGoodsSearchList()
			},
			// 关键词搜索
			search(){
				this.form.page = 0
				this.goods_list = []
				this.noMore = false
				this.showGoods = false
				this.getGoodsSearchList()
			},
			// 监听选择商品弹窗关闭
			closeSelect(e){
				if(!e.show){
					this.goods_list = []
				}
			},
			// 加载更多商品
			loadMoreGoods(){
				if(!this.noMore){
					this.isLoading = true
					this.form.page++
					this.getGoodsSearchList()
				}
			},
			// 跳转商品详情
			goProInfo(goods_id){
				getApp().goProInfo(goods_id,false,'tieIn')
			},
			// 加入方案
			join(data){
				this.proData = data
				let priceArr = [],
						priceInterval = 0
				data.sku_lists.forEach(item => {
					priceArr.push(item.retail_price)
				})
				if(Math.min.apply(null, priceArr)==Math.max.apply(null, priceArr)){
					priceInterval = Math.min.apply(null, priceArr)
				}else{
					priceInterval = Math.min.apply(null, priceArr) + '~' + Math.max.apply(null, priceArr)
				}
				this.goods_info.img = data.image
				this.goods_info.price = priceInterval
				this.goods_info.factory_id = data.factory_id
				this.getSku(data)
				this.$refs.sku.open()
			},
			// 关闭sku选择
			closeSku(){
				this.$refs.sku.close()
			},
			// 重组sku
			getSku(data){
				data.sku_lists.forEach(item => {
					this.skuAllList.push({
						sku_id: item.sku_id,
						sku_sn: item.sku_id,
						img: item.img,
						goods_id: item.goods_id,
						coefficient_num: item.coefficient_num,
						retail_price: item.retail_price,
						self_price: item.self_price,
						sku: item.color + ',' + item.lining + ',' + item.size
					})
				})
				this.skuList = []
				this.skuList.push({
					name: data.parameter.name_color?data.parameter.name_color:'颜色',
					list: this.getKeyValue(data.sku_lists, 'color')
				})
				this.skuList.push({
					name: data.parameter.name_lining?data.parameter.name_lining:'材质',
					list: this.getKeyValue(data.sku_lists, 'lining')
				})
				this.skuList.push({
					name: data.parameter.name_size?data.parameter.name_size:'尺寸',
					list: this.getKeyValue(data.sku_lists, 'size')
				})
				let shopItemInfo = {}
				for (var i in this.skuAllList) {
					//修改数据结构格式，改成键值对的方式，以方便和选中之后的值进行匹配
					this.$set(shopItemInfo,this.skuAllList[i].sku,this.skuAllList[i])
				}
				this.shopItemInfo = JSON.stringify(shopItemInfo)
			},
			// 获取字段值返回二位数组
			getKeyValue(arr, key) {
				let name = key
				return this.unique(arr.map(obj => {
					return {
						id: obj.sku_id,
						name: obj[name],
						price: obj.retail_price,
						img: obj.img
					}
				}))
			},
			// 去重
			unique(arr) {
				let temp = {},
					result = [];
				arr.map((item, index) => {
					if (!temp[item.name]) {
						result.push(item);
						temp[item.name] = true
					}
				})
				return result
			},
			// 确定加入方案
			confirmAction(e){
				let space_id
				if(uni.getStorageSync('typeValue')==1){
					space_id = this.professionalSpaceId
				}else{
					space_id = this.form.space_id
				}
				console.log(e)
				this.tieIn.list.forEach(item => {
					if(space_id==item.space_id){
						// #ifdef APP-PLUS || H5
						item.goods_list.push({
							checked: true,
							goods_id: this.proData.goods_id,
							goods_name: this.proData.goods_name,
							goods_sku: this.selectedArr.join(','),
							num: this.goods_info.number,
							image: this.goods_info.img,
							retail_price: this.goods_info.price,
							sku_id: this.goods_info.sku_id,
							style_id: this.proData.style_id,
							type_id: 1
						})
						// #endif
						// #ifdef MP-WEIXIN
						item.goods_list.push({
							checked: true,
							goods_id: this.proData.goods_id,
							goods_name: this.proData.goods_name,
							goods_sku: e[0].join(','),
							num: e[1].number,
							image: e[1].img,
							retail_price: e[1].price,
							sku_id: e[1].sku_id,
							style_id: this.proData.style_id,
							type_id: 1
						})
						// #endif
					}
				})
				if(this.tieIn.match_id){
					// #ifdef APP-PLUS || H5
					let singleGoods = [{
						goods_id: this.proData.goods_id,
						sku_id: this.goods_info.sku_id,
						num: this.goods_info.number,
						style_id: this.proData.style_id,
						space_id: uni.getStorageSync('typeValue')==1?this.professionalSpaceId:this.form.space_id,
						match_id: this.tieIn.match_id,
						type_id: 1
					}]
					// #endif
					// #ifdef MP-WEIXIN
					let singleGoods = [{
						goods_id: this.proData.goods_id,
						sku_id: e[1].sku_id,
						num: e[1].number,
						style_id: this.proData.style_id,
						space_id: uni.getStorageSync('typeValue')==1?this.professionalSpaceId:this.form.space_id,
						match_id: this.tieIn.match_id,
						type_id: 1
					}]
					// #endif
					let data = {
						match_id: this.tieIn.match_id,
						goods: JSON.stringify(singleGoods)
					}
					this.$u.api.MatchAddGoods(data).then(() => {
						this.getMatchInfo()
					})
				}
				setTimeout(() => {
					this.$refs.sku.close()
					this.singleChange()
					this.selectedArr = []
					this.subIndex = []
					uni.showToast({
						icon: 'none',
						title: '加入成功'
					})
				},200)
			},
			// 全选
			choseAll(e){
				if(e.value){
					this.tieIn.list.forEach(item => {
						if(item.goods_list.length){
							item.goods_list.forEach(data => {
								this.$set(data,'checked',true)
							})
						}
					})
					this.singleChange()
				}else{
					this.tieIn.list.forEach(item => {
						if(item.goods_list.length){
							item.goods_list.forEach(data => {
								this.$set(data,'checked',false)
							})
						}
					})
					this.choseNum = 0
					this.chosePrice = 0
				}
			},
			// 选择单个商品
			singleChange(e,match_goods_id){
				this.choseNum = 0
				this.chosePrice = 0
				let proNum = 0
				this.checkedAll = false
				this.tieIn.list.forEach(item => {
					if(item.goods_list.length){
						item.goods_list.forEach(data => {
							proNum++
							if(data.checked){
								this.choseNum++
								this.chosePrice += data.retail_price * data.num
							}
						})
					}
				})
				if(this.choseNum==proNum){
					this.checkedAll = true
				}else{
					this.checkedAll = false
				}
				if(e && match_goods_id){
					this.$u.api.MatchUpGoods({num: e.value,match_goods_id: match_goods_id})
				}
			},
			// 删除
			del(){
				let ids = []
				let match_goods_id = []
				this.tieIn.list.forEach(item => {
					if(item.goods_list.length){
						item.goods_list.forEach(data => {
							if(data.checked){
								ids.push(data.goods_id)
								match_goods_id.push(data.match_goods_id)
							}
						})
					}
				})
				if(!ids.length){
					uni.showToast({
						icon: 'none',
						title: '请选择需要移除的商品'
					})
					return false
				}
				uni.showModal({
					title: '温馨提示',
					content: '移除后不可恢复，是否确定移除所选商品？',
					success: (res) => {
						if(res.confirm){
							ids.forEach(item => {
								this.tieIn.list.forEach(data => {
									if(data.goods_list.length){
										data.goods_list.forEach((goodsItem,index) => {
											if(item==goodsItem.goods_id){
												data.goods_list.splice(index,1)
											}
										})
									}
								})
							})
							if(this.tieIn.match_id){
								this.$u.api.MatchDelGoods({match_goods_id: match_goods_id.join(','),match_id: this.tieIn.match_id})
							}
							this.singleChange()
						}
					}
				})
			},
			delSingle(index,i,match_goods_id){
				uni.showModal({
					title: '温馨提示',
					content: '删除后不可恢复，是否确认删除？',
					success: (success) => {
						if(success.confirm){
							if(match_goods_id){
								this.$u.api.MatchDelGoods({match_goods_id: match_goods_id,match_id: this.tieIn.match_id})
								this.tieIn.list.forEach((item,x) => {
									if(index==x){
										item.goods_list.forEach((data,y) => {
											if(i==y){
												item.goods_list.splice(y,1)
											}
										})
									}
								})
							}else{
								this.tieIn.list.forEach((item,x) => {
									if(index==x){
										item.goods_list.forEach((data,y) => {
											if(i==y){
												item.goods_list.splice(y,1)
											}
										})
									}
								})
							}
						}
					}
				})
			},
			// 关闭风格选择弹窗
			closePickStyle(){
				this.$refs.selectStyle.close()
			},
			// 方案命名弹窗
			created(){
				if(!this.choseNum){
					if(this.tieIn.match_id){
						uni.showToast({
							icon: 'none',
							title: '请选择方案中的商品'
						})
					}else{
						uni.showToast({
							icon: 'none',
							title: '请选择创建方案的商品'
						})
					}
					return false
				}
				let allGoodsIds = []
				this.tieIn.list.forEach((item,i) => {
					if(item.goods_list.length){
						item.goods_list.forEach((data,y) => {
							allGoodsIds.push({
								type_id: data.type_id,
								goods_id: data.goods_id
							})
						})
					}
				})
				this.$u.api.GetGoodsImg({goods_list: JSON.stringify(allGoodsIds)}).then(res => {
					this.allGoodsImgs = res.datas
					this.$refs.created.open()
				})
			},
			// 关闭方案命名弹窗
			closeCreated(){
				this.$refs.created.close()
			},
			// 立即创建
			submit(){
				let is_match = /^[0-9]*$/
				let is_letter = /^[a-zA-Z]+$/
				if(!this.tieInForm.name){
					uni.showToast({
						icon: 'none',
						title: '请输入方案名称'
					})
					return false
				}else if(this.tieInForm.name.length < 2 || this.tieInForm.name.length >= 20){
					uni.showToast({
						icon: 'none',
						title: '方案名称需大于2个字且小于20字',
						duration: 1500
					})
					return false
				}else if(is_match.test(this.tieInForm.name) || is_letter.test(this.tieInForm.name)){
					uni.showToast({
						icon: 'none',
						title: '方案名称不能是纯数字或纯英文'
					})
					return false
				}else if(!this.match_poster){
					uni.showToast({
						icon: 'none',
						title: '请选择封面图'
					})
					return false
				}
				let goods = []
				let allGoods = []
				this.tieIn.list.forEach((item,i) => {
					if(item.goods_list.length){
						item.goods_list.forEach((data,y) => {
							allGoods.push(data)
							goods.push({
								goods_id: data.goods_id,
								sku_id: data.sku_id,
								num: data.num,
								space_id: item.space_id,
								style_id: data.style_id,
								type_id: data.type_id
							})
						})
					}
				})
				this.tieInForm.price = this.chosePrice
				this.tieInForm.img = this.match_poster
				this.tieInForm.goods = JSON.stringify(goods)
				if(this.tieIn.match_id){
					// #ifdef APP-PLUS || H5
					this.changeMatch()
					// #endif
					// #ifdef MP-WEIXIN
					this.changeMatch()
					return false
					if(uni.getExtConfigSync().appid==='wx9528157f77bff5d2'){
						uni.getSetting({
							withSubscriptions: true,
							success: (success) => {
								if(!success.subscriptionsSetting.mainSwitch){
									this.$refs.openSetting.init()
								}else{
									if(success.subscriptionsSetting){
										if(!success.subscriptionsSetting.itemSettings || success.subscriptionsSetting.itemSettings['QliTA5SAA0Mgoh0ZK9EKjLzROuJPLDJppiGSy5Lx4iM']==="reject"){
											this.$refs.templeteMessage.open()
										}else if(!success.subscriptionsSetting.itemSettings['QliTA5SAA0Mgoh0ZK9EKjLzROuJPLDJppiGSy5Lx4iM']){
											this.$refs.templeteMessage.open()
										}else{
											this.changeMatch()
										}
									}
								}
							}
						})
					}else{
						this.changeMatch()
					}
					// #endif
				}else{
					// #ifdef APP-PLUS || H5
					this.submitPar()
					// #endif
					// #ifdef MP-WEIXIN
					this.submitPar()
					return false
					if(uni.getExtConfigSync().appid==='wx9528157f77bff5d2'){
						uni.getSetting({
							withSubscriptions: true,
							success: (success) => {
								if(!success.subscriptionsSetting.mainSwitch){
									this.$refs.openSetting.init()
								}else{
									if(success.subscriptionsSetting){
										if(!success.subscriptionsSetting.itemSettings || success.subscriptionsSetting.itemSettings['QliTA5SAA0Mgoh0ZK9EKjLzROuJPLDJppiGSy5Lx4iM']==="reject"){
											this.$refs.templeteMessage.open()
										}else if(!success.subscriptionsSetting.itemSettings['QliTA5SAA0Mgoh0ZK9EKjLzROuJPLDJppiGSy5Lx4iM']){
											this.$refs.templeteMessage.open()
										}else{
											this.submitPar()
										}
									}
								}
							}
						})
					}else{
						this.submitPar()
					}
					// #endif
				}
			},
			changeMatch(){
				let changeData = {
					match_id: this.tieIn.match_id,
					name: this.tieInForm.name,
					remark: this.tieInForm.remark,
					img: this.match_poster,
					price: this.tieInForm.price
				}
				uni.showModal({
					title: '温馨提示',
					content: '是否确认修改方案？',
					success: (confirm) => {
						if(confirm.confirm){
							this.$u.api.MatchUp(changeData).then(res => {
								uni.navigateTo({
									animationDuration: 500,
									url: '/tie-in/tie-in-preview?is_preview=true&is_update=true&match_id='+this.tieIn.match_id,
									success: () => {
										this.tieInForm = this.$options.data().tieInForm
										this.tieIn = this.$options.data().tieIn,
										this.form = {
											keyword: '',
											space_id: '',
											style_id: '',
											class_id: '',
											order_by: 'goods_id',
											page: 0,
											asc: 2
										}
										this.choseNum = 0
										this.chosePrice = 0
										this.$nextTick(() => {
											uni.removeStorageSync('tieIn')
											this.$refs.created.close()
										})
									}
								})
							})
						}
					}
				})
			},
			submitPar(){
				this.$u.api.matchAdd(this.tieInForm).then(res => {
					uni.navigateTo({
						animationDuration: 500,
						url: '/tie-in/tie-in-preview?is_preview=true&match_id='+res.datas,
						success: () => {
							this.tieIn = this.$options.data().tieIn
							this.tieInForm = this.$options.data().tieInForm
							this.form = {
								keyword: '',
								space_id: '',
								style_id: '',
								class_id: '',
								order_by: 'goods_id',
								page: 0,
								asc: 2
							}
							this.choseNum = 0
							this.chosePrice = 0
							this.$nextTick(() => {
								uni.removeStorageSync('tieIn')
								this.$refs.created.close()
							})
						}
					})
				})
			},
			// 打开sku弹窗重新渲染sku组件
			showSkuFun(e){
				if(e.show){
					this.showSku = true
				}else{
					this.selectedArr = []
					this.subIndex = []
					this.showSku = false
				}
			},
			// 选择封面图
			chosePoster(poster){
				this.match_poster = poster
			},
			TemplateMessage(){
				uni.requestSubscribeMessage({
					tmplIds: [
						'QliTA5SAA0Mgoh0ZK9EKjLzROuJPLDJppiGSy5Lx4iM'
					],
					complete: (e) => {
						this.$refs.templeteMessage.close()
						if(this.tieIn.match_id){
							this.changeMatch()
						}else{
							this.submitPar()
						}
					}
				})
			},
			closeTempleteMessage(){
				this.$refs.templeteMessage.close()
			},
			closeGoodsListPop(){
				this.$refs.goodsListPop.close()
			},
			changeType(value){
				this.typeValue = value
				uni.setStorageSync('typeValue',value)
			},
			choseSpace(space_id){
				this.form.space_id = space_id
				this.professionalSpaceId = space_id
			},
			cancelJoin(){
				uni.navigateBack()
			}
		},
		onHide() {
			// let proNum = 0
			// this.tieIn.list.forEach(item => {
			// 	if(item.goods_list.length){
			// 		item.goods_list.forEach(data => {
			// 			proNum++
			// 		})
			// 	}
			// })
			// if(proNum==0){
			// 	uni.removeStorageSync('tieIn')
			// }
		},
		onUnload() {
			// let proNum = 0
			// this.tieIn.list.forEach(item => {
			// 	if(item.goods_list.length){
			// 		item.goods_list.forEach(data => {
			// 			proNum++
			// 		})
			// 	}
			// })
			// if(proNum==0){
			// 	uni.removeStorageSync('tieIn')
			// }
			uni.removeStorageSync('tieIn')
		}
	}
</script>

<style lang="scss">
	.tie-in{
		padding-bottom: 110rpx;
		.tie-in-banner{
			position: relative;
			image{
				width: 100%;
				height: 556rpx;
			}
			.type{
				position: absolute;
				left: 0;
				right: 0;
				bottom: 50rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				.type-item{
					width: 120rpx;
					line-height: 62rpx;
					background-color: #FFF;
					text-align: center;
					font-size: 26rpx;
					&:first-child{
						border-radius: 8rpx 0 0 8rpx;
					}
					&:last-child{
						border-radius: 0 8rpx 8rpx 0;
					}
					&.active{
						background-color: #F59359;
						color: #FFF;
					}
				}
			}
		}
		.tie-in-list{
			margin: -30rpx 30rpx 0;
			background-color: #FFF;
			border-radius: 4px;
			position: relative;
			z-index: 1;
			.chosed-item{
				border-bottom: solid 30rpx #FFF;
				.chosed-item-tit{
					background-color: #F3F3F3;
					border-radius: 4px;
					height: 110rpx;
					display: flex;
					align-items: center;
					padding: 0 30rpx;
					justify-content: space-between;
					.space-name{
						flex: 1;
						min-width: 0;
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #141414;
						image{
							width: 60rpx;
							margin-right: 20rpx;
						}
					}
					.space-icon{
						image{
							width: 44rpx;
							height: 44rpx;
						}
					}
				}
				.chosed-item-goods-item{
					display: flex;
					align-items: center;
					background-color: #FFF;
					padding: 30rpx 0;
					&:last-child{
						padding-bottom: 0;
					}
					.goods-item-image{
						width: 200rpx;
						height: 200rpx;
						image{
							width: 200rpx;
							height: 200rpx;
						}
					}
					.goods-item-info{
						flex: 1;
						min-width: 0;
						margin-left: 30rpx;
						.goods-item-name{
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 30rpx;
							font-weight: bold;
							margin-bottom: 10rpx;
						}
						.goods-item-skuInfo{
							display: flex;
							background-color: #FBFBFB;
							padding: 0 10rpx;
							color: #909090;
							font-size: 20rpx;
							text{
								flex: 1;
								min-width: 0;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
							}
						}
						.goods-item-price{
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 20rpx;
							text.price{
								color: #F59359;
								font-size: 20rpx;
								text{
									font-size: 28rpx;
								}
							}
							.number{
								color: #757575;
								font-size: 24rpx;
								flex: 1;
								min-width: 0;
								text-align: right;
								/deep/ .u-icon-minus{
									width: 52rpx;
								}
								/deep/ .u-icon-plus{
									width: 52rpx;
								}
							}
							.del{
								margin-left: 30rpx;
								image{
									width: 34rpx;
									height: 35rpx;
								}
							}
						}
					}
				}
			}
		}
		.tie-in-bot{
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 110rpx;
			background-color: #FFF;
			border-top: solid 1px #EEE;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			z-index: 2;
			.del{
				border-left: solid 1px #EEE;
				color: #5C5C5C;
				font-size: 24rpx;
				border-radius: 8rpx;
				color: #FFF;
				background-color: #F59359;
				padding: 8rpx 20rpx;
			}
			.total{
				flex: 1;
				min-width: 0;
				text-align: right;
				font-size: 20rpx;
				color: #5C5C5C;
				line-height: 40rpx;
				text{
					font-size: 28rpx;
					font-weight: bold;
					color: #000;
				}
			}
			.created{
				width: 200rpx;
				text-align: center;
				height: 80rpx;
				line-height: 80rpx;
				color: #FFF;
				font-size: 28rpx;
				border-radius: 4px;
				background-color: #F59359;
				margin-left: 55rpx;
			}
		}
		.goodsListPop{
			background-color: #FFF;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			.goodsListPop-search{
				display: flex;
				align-items: center;
				.search-left{
					flex: 1;
					min-width: 0;
				}
				.close{
					margin-left: 20rpx;
				}
			}
			.goodsListPop-class{
				margin: 0 -30rpx;
				border-bottom: solid 1px #EEE;
				padding-top: 30rpx;
			}
			.goodsListPop-goods{
				height: 840rpx;
				.goods-item{
					display: flex;
					padding: 30rpx 0;
					border-bottom: solid 1px #EEE;
					&:first-child{
						padding-top: 0;
					}
					&:last-child{
						padding-bottom: 0;
						border-bottom: none;
					}
					.goods-item-image{
						width: 240rpx;
						height: 240rpx;
						margin-right: 30rpx;
						image{
							width: 240rpx;
							height: 240rpx;
						}
					}
					.goods-item-info{
						flex: 1;
						min-width: 0;
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						.goods-item-name{
							font-size: 30rpx;
							color: #141414;
							line-height: 55rpx;
						}
						.goods-item-price{
							display: flex;
							justify-content: space-between;
							align-items: center;
							text{
								color: #F59359;
								font-size: 20rpx;
								text{
									font-size: 28rpx;
								}
							}
							.join{
								width: 124rpx;
								height: 52rpx;
								background: #141414;
								border-radius: 4px;
								color: #FFF;
								line-height: 52rpx;
								text-align: center;
								font-size: 24rpx;
							}
						}
					}
				}
			}
		}
		.selectStylePop{
			background-color: #FFF;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			.selectStylePop-tit{
				display: flex;
				justify-content: space-between;
				text{
					font-weight: bold;
					color: #28221F;
					font-size: 36rpx;
				}
				margin-bottom: 10rpx;
			}
			.selectStylePop-subtit{
				font-size: 24rpx;
				color: #999;
			}
			.selectStylePop-list{
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				.selectStylePop-item{
					margin-top: 25rpx;
					position: relative;
					.checked{
						position: absolute;
						right: 0;
						top: 0;
						background-color: #FFF;
						border-radius: 0 0 0 8rpx;
						padding: 5rpx;
					}
					image{
						width: 330rpx;
						height: 160rpx;
						border-radius: 8rpx;
					}
				}
			}
			.enter{
				background-color: #141414;
				border-radius: 8rpx;
				color: #FFF;
				text-align: center;
				height: 88rpx;
				line-height: 88rpx;
				margin-top: 50rpx;
			}
		}
		.created-tie-in{
			background-color: #FFF;
			padding: 30rpx;
			border-radius: 30rpx 30rpx 0 0;
			.created-tie-in-tit{
				display: flex;
				justify-content: space-between;
				text{
					font-weight: bold;
					color: #28221F;
					font-size: 36rpx;
				}
				margin-bottom: 10rpx;
			}
			.created-tie-in-form{
				.label{
					margin-top: 30rpx;
					color: #757575;
					font-size: 28rpx;
				}
				.input{
					margin-top: 20rpx;
					input{
						padding: 20rpx;
						border-radius: 4rpx;
						border: solid 1px #EEE;
						font-size: 24rpx;
					}
				}
				.chose-poster{
					display: flex;
					.chose-poster-scroll{
						white-space: nowrap;
					}
					.poster-image{
						display: inline-block;
						width: 173rpx;
						height: 173rpx;
						border: solid 4rpx #EEE;
						margin: 20rpx 20rpx 0 0;
						&.active{
							border-color: #F59359;
						}
					}
				}
				.btn{
					height: 88rpx;
					line-height: 88rpx;
					margin-top: 30rpx;
					background-color: #141414;
					border-radius: 8rpx;
					text-align: center;
					color: #FFF;
				}
			}
		}
		.templeteMessage-box{
			width: 600rpx;
			padding: 40rpx;
			background-color: #FFF;
			border-radius: 10rpx;
			text-align: center;
			.templeteMessage-box-close{
				text-align: right;
				color: #999;
				margin-bottom: 25rpx;
			}
			.templeteMessage-tit{
				padding: 50rpx 0 30rpx;
				font-size: 32rpx;
				font-weight: bold;
				color: #141414;
			}
			.templeteMessage-subtit{
				color: #909090;
				font-size: 24rpx;
			}
			image{
				display: inline-block;
				width: 350rpx;
				height: 323rpx;
				border-radius: 10rpx;
			}
			.templeteMessage-btn{
				border-radius: 8rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				background-color: #141414;
				color: #FFF;
				font-size: 28rpx;
				margin-top: 80rpx;
			}
		}
		.choseSpace{
			background-color: #FFF;
			border-radius: 8rpx 8rpx 0 0;
			padding: 30rpx;
			.choseSpace-item{
				display: flex;
				align-items: center;
				margin-bottom: 30rpx;
				padding: 20rpx;
				border: solid 2rpx #EEE;
				border-radius: 8rpx;
				font-size: 32rpx;
				image{
					width: 60rpx;
					margin-right: 20rpx;
				}
				&.active{
					border-color: #F59359;
				}
			}
			.confirm{
				display: flex;
				.cancel-btn{
					flex: 1;
					line-height: 86rpx;
					text-align: center;
					border-radius: 8rpx;
					color: #FFF;
					font-size: 32rpx;
					color: #141414;
					border: solid 2rpx #141414;
				}
				.confirm-btn{
					flex: 1;
					height: 90rpx;
					line-height: 90rpx;
					text-align: center;
					border-radius: 8rpx;
					color: #FFF;
					font-size: 32rpx;
					background-color: #141414;
					margin-left: 30rpx;
				}
			}
		}
	}
</style>